<template>
  <div class="aside">
    <el-menu
     background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :default-active="active"
      class="el_menu webkitScrollBar"
      :router="true"
      :collapse="isCollapse"
      >
      <leftMenuItem
        v-for="(item, index) in menu"
        :key="index"
        :collapse="isCollapse"
        :routeObj="item">
      </leftMenuItem>
    </el-menu>
  </div>
</template>

<script>
import leftMenuItem from "./leftMenuItem.vue"
export default {
  components:{leftMenuItem},
  data(){
    return{
      // isCollapse:this.$store.state.isCollspace,
      // menu:this.$store.state.routerTree
    }
  },
  computed:{
    menu(){
      return this.$store.state.routerTree
    },
    active(){
      return this.$route.path
    },
    isCollapse(){
      return this.$store.state.isCollspace
    }
  },
  methods:{
  }
}
</script>

<style scoped>
.aside{
  border-right: 1px solid #f1f1f1;
  height: inherit;
  overflow: hidden;
}
.el_menu{
  border:none;
  height: inherit;
  overflow: auto;
  /* min-width: 200px; */
}
.el_menu >>> .el-submenu .el-menu-item{
  min-width: 0;
}
</style>